<div class="flex w-full h-[99%]">
	<div class="flex w-[20%] h-full">
		<div class="w-full h-full flex-column p-[5px] bg-white">
			<form [formGroup]="searchForm" class="w-full flex h-[32px]" nz-form>
				<div class="flex flex-1 h-full">
					<nz-select class="w-full" formControlName="transportShipId" nzShowSearch nzAllowClear
										 (nzOnSearch)="searchShipList($event)">
						<nz-option *ngFor="let item of shipList" [nzValue]="item!.transportShipId"
											 [nzLabel]="item!.impShipInfo"></nz-option>
					</nz-select>
				</div>
				<div class="flex w-[64px] h-full">
					<div class="flex-1 flex bg-blue-500 h-full justify-center items-center" (click)="search()">
						<a nz-icon nzType="search" nzTheme="outline" class="text-lg flex text-white"></a>
					</div>
					<div class="flex-1 flex bg-gray-100 h-full  justify-center items-center" (click)="reset()">
						<a nz-icon nzType="undo" nzTheme="outline" class="text-lg flex"></a>
					</div>
				</div>
			</form>

			<nz-card [nzBodyStyle]="{ padding: '12px 12px 0px 12px' }" class="card-table">
				<st
					#st
					[size]="'small'"
					class="hover-table fix-table st-odd-table"
					[scroll]="{ y: 'calc(100vh - 265px)' }"
					[resizable]="true"
					[data]="dataList"
					[columns]="columns"
					[page]="pageSetting"
					[total]="this.pageInfo.total"
					[ps]="this.pageInfo.size"
					[pi]="this.pageInfo.current"
					[loading]="this.pageInfo.loading"
					(change)="stChange($event)"
					[clickRowClassName]="sa"

				>
					<ng-template st-row="impShipInfo" let-item>
						<div class="flex w-full h-full">
							<div class="flex h align-self-center" style="width: 10px">
								<div class="dot" [style]="{ background: dotColor[item?.forecastStatus] }"></div>
							</div>
							<div class="flex h ml5 flex-1">
								<div style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis">
									{{ item.impShipInfo }}
								</div>
							</div>
						</div>
					</ng-template>
				</st>
			</nz-card>
		</div>
	</div>
	<div class="flex h-full ml-[10px] w-[80%]">
		<app-import-ship-stat-list class="w-full h-full" #statList [shipInfo]="selectedShip"></app-import-ship-stat-list>
	</div>
</div>
